<template>
  <el-container>
    <el-main class="menu-wrapper">
      <el-form ref="addPromotion" :model="addPromotion" :rules="rules" label-width="90px">
          <el-form-item label="商品" prop="productName" style="width:600px;">
            <el-select v-model="addPromotion.productName"  value-key="id"  placeholder="请选择商品" style="width:100%;"
                       filterable :filter-method="getProductList" @change="changeProduct">
              <el-option v-for="item in productOptions" :key="item.id"  :label="item.name" :value="item" />
            </el-select>
          </el-form-item>
        <el-form-item label="促销标题" prop="title" style="width:300px">
          <el-input v-model="addPromotion.title"   placeholder="如消费满100元生效"></el-input>
        </el-form-item>
        <el-form-item label="活动类型" prop="type" style="width:300px">
            <el-select v-model="addPromotion.type"  placeholder="请选择类型" style="width:100%">
              <el-option label="买送" :value="Number(7)"></el-option>
              <el-option label="秒杀" :value="Number(8)"></el-option>
              <el-option label="第二件半价" :value="Number(9)"></el-option>
              <el-option label="新人价" :value="Number(10)"></el-option>
              <el-option label="买赠" :value="Number(11)"></el-option>
            </el-select>
        </el-form-item>
        <div style="display: flex">
              <el-form-item label="购买数量" prop="minimumPrice" style="width:300px"
                            v-if="addPromotion.type===7">
                <el-input v-model="addPromotion.minimumPrice"  type="number"  placeholder="如消费满100元生效"></el-input>
              </el-form-item>
              <el-form-item :label="addPromotion.type|watchlabeltype" prop="amount" style="width:300px"
                            v-if="addPromotion.type===7||addPromotion.type===8||addPromotion.type===10">
                <el-input v-model="addPromotion.amount"  type="number" ></el-input>
              </el-form-item>
        </div>
        <el-form-item label="赠品清单" prop="giftType"  v-if="addPromotion.type===11">
          <el-button  type="primary" @click="addCoupon('添加')">添加</el-button>
        </el-form-item>
            <coupon  style="width:510px;margin-left: 90px;margin-bottom: 20px" :couponType="1" v-if="addPromotion.type==11"  ref="couponAdd"></coupon>
       <div style="display: flex">
         <el-form-item label="商品库存" prop="stock" style="width:300px">
           <el-input type="number" v-model="addPromotion.stock" placeholder="请输入库存"></el-input>
         </el-form-item>
         <el-form-item label="" prop="firsted" v-if="addPromotion.type!=10" >
           <el-checkbox v-model="addPromotion.firsted">只适用于首单生效</el-checkbox>
         </el-form-item>
       </div>

        <el-form-item label="起始日期" prop="dateTime"  style="width:600px">
            <el-date-picker
              v-model="addPromotion.dateTime"
              style="width:100%"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>

        </el-form-item>
        <el-form-item>
          <el-col :span="12">
            <el-button type="primary" :loading="clicked" @click="savePromotion('addPromotion')">确 定</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>

  import coupon from '@/views/promotion/components/coupon'
  import {list as productList} from '@/api/product'
  import {save} from '../../api/promotion'
  import {EventBus} from '@/api/eventBus'


  export default {
    name: 'productPromotion-add',
    data() {
      return {
        goods: '',
        clicked: false,
        rules: {
          type: [{required: true, message: '请输入选择类型', trigger: 'change'},],
          agioRate: [
            {required: true, message: '请输入满减比例', trigger: 'blur'},
          ],
          amount: [
            {required: true, message: '请输入金额', trigger: 'blur'},
          ],
          minimumPrice: [
            {required: true, message: '请输入数量', trigger: 'blur'},
          ],
          stock: [
            {required: true, message: '请输入库存', trigger: 'blur'},
          ],
          productName: [
            {required: true, message: '请选择活动商品', trigger: 'change'},
          ],
          dateTime: [
            {required: true, message: '请选择活动时间',trigger: 'change' },
          ],
          integer: [
            {required: true, message: '请输入优先级', trigger: 'blur'},
          ],
          introduction: [
            {required: true, message: '请输入促销说明', trigger: 'blur'},
          ],
        },
        productOptions: [],
        addPromotion: {
          dateTime: [],
          productName:'',
          givenAmount: 0,
          agioRate: 0,
          amount: 0,
          createDate: '',
          stock: '',
          firsted: false,
          giftType: '',
          gifts: [],
          introduction: '',
          minimumPrice: 0,
          goodsId: '',
          modifyDate: '',
          orders: 0,
          overlying: false,
          thumbnail: '',
          title: '',
          type: ''
        },
      }
    },
    components:{
      coupon
    },
    methods: {
      addCoupon(){
        this.$refs.couponAdd.add()
      },
      change(e) {
        console.log(this.goods);
        this.addPromotion.goodsId = e.goodsId;
        console.log(this.addPromotion.goodsId)
      },
      // queryProduct (query) { // 查询商品
      //   this.productOptions = []
      //   productList({name: query}).then(res => {
      //     this.$set(this.$data, 'productOptions', res.data.data)
      //   }).catch(err => {
      //     console.log(err)
      //   })
      // },
      getProductList (query) { // 加载商品
        productList({keyword: query, pageSize: 20,isList:true}).then(res => {
          this.$set(this.$data, 'productOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      changeProduct(data){
          this.addPromotion.goodsId=data.goodsId
          this.addPromotion.productName=data.name
      },
      savePromotion(addPromotion) {
        if (this.addPromotion.type === '') {
          this.clicked = false
        }
        this.$refs[addPromotion].validate((valid) => {
          if (valid) {
            this.clicked = true

            var addPromotion = {
              agioRate: this.addPromotion.agioRate,
              amount: this.addPromotion.amount,
              createDate: new Date(),
              firsted: this.addPromotion.firsted,
              giftType: this.addPromotion.giftType,
              gifts: [],
              stock: this.addPromotion.stock,
              introduction: this.addPromotion.introduction,
              minimumPrice: this.addPromotion.minimumPrice,
              modifyDate: new Date(),
              beginDate: '',
              endDate: '',
              status: 0,
              goodsId: this.addPromotion.goodsId,
              orders: this.addPromotion.orders,
              overlying: this.addPromotion.overlying,
              thumbnail: this.addPromotion.thumbnail,
              title: this.addPromotion.title,
              type: this.addPromotion.type
            }
            if (this.addPromotion.dateTime.length > 0) {
              addPromotion.beginDate = this.addPromotion.dateTime[0];
              addPromotion.endDate = this.addPromotion.dateTime[1]
            }
            if (this.addPromotion.type==11){
              addPromotion.gifts=this.$refs.couponAdd.coupons
              addPromotion.giftType=1
            }
            // if (this.addPromotion.type === 7) {
            //   addPromotion.title = '买' + addPromotion.minimumPrice + '件' + '送' + addPromotion.amount + '件'
            // } else if (this.addPromotion.type === 8) {
            //   addPromotion.title = addPromotion.amount + '元秒杀'
            // } else if (this.addPromotion.type === 9) {
            //   addPromotion.title = '第二件半价'
            // } else if (this.addPromotion.type === 10) {
            //   addPromotion.title = '新人价:' + addPromotion.amount + '元'
            // }
            console.log(addPromotion)
            save(addPromotion).then(response => {
              this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews}) => {
                this.$router.push({
                  path: '/productPromotion/list'
                })
              })
              EventBus.$emit('productPromotion-add', response.data)
              this.clicked = false
            }).catch(error => {
              this.clicked = false;
              console.log('error')
            })
          } else {
            this.clicked = false;
          }
        })
      },
    },
    created() {
      this.getProductList()
    },
    filters: {
      watchlabeltype(val) {
        if (val === 7) {
          return '赠送数量'
        } else if (val === 8) {
          return '秒杀价格'
        } else if (val === 10) {
          return '新人价'
        }
      }
    }
  }
</script>

<style scoped>

</style>
